import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { addNumberAction } from '../store/count/countSlice'
import { getListAction } from '../store/home'

export class Home extends PureComponent {
  componentDidMount() {
    this.props.getList()
  }
  render() {
    const { count,addNumber } = this.props
    return (
      <div>
        Home count: {count}
        <button onClick={() => addNumber(1)}>+1</button>
        <button onClick={() => addNumber(5)}>+5</button>
        {/* <ul>
          {banners.map((item,index)=>(
            <li key={index}>{item.title}</li>
          ))}
        </ul>
        <ul>
          {recommends.map((item,index)=>(
            <li key={index}>{item.title}</li>
          ))}
        </ul> */}
      </div>
    )
  }
}
const  mapStateToProps=(state)=> {
  console.log(state)
  return {
    count: state.count.count,
    // banners: state.home.banners,
    // recommends: state.home.recommends
  }
}
const mapDispatchToProps=(dispatch)=> {
  return {
    addNumber: (num)=> dispatch(addNumberAction(num)),
    getList: ()=> dispatch(getListAction())
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Home)
